<template>
    <div ref="chart" style="height: 100%" />
</template>
<script>
import * as echarts from 'echarts'
export default {
    mounted() {
        this.instance = this.createChart()
    },
    methods: {
        createChart() {
            const container = this.$refs.chart
            const instance = echarts.init(container)
            this.$once('hook:beforeDestroy', () => {
                instance.dispose()
            })
            this.bindResize(container, instance)
            return instance
        },
        bindResize(container, instance) {
            const resize = () => {
                instance.resize()
            }
            if (ResizeObserver) {
                const resizeObserver = new ResizeObserver(() => {
                    setTimeout(() => {
                        resize()
                    })
                })
                resizeObserver.observe(container)
                this.$once('hook:beforeDestroy', () => {
                    resizeObserver.unobserve(container)
                })
            } else {
                window.addEventListener('resize', resize)
                this.$once('hook:beforeDestroy', () => {
                    window.removeEventListener('resize', resize)
                })
            }
        },
    },
}
</script>
